<template>
  <div> 
    <HeaderNav :title="title" :showBack='true' />
    <div class="sendgift_container" v-if="list.length > 0" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
      
      <div @click='showDetail(item.gift)'  v-for="(item, index) in list" :key="index" class='list_box'>
        <div class="sendgift_box" >
          <img :src="item.gift.path" class="sendgift_img" />
          <div class="sendgift_txt">{{item.gift.name}}</div>
          <div class="sendgift_info">{{item.gift.info}}</div>
          <div class="sendgift_price">{{$t('m.msg.NUM')}}：{{item.num}}</div>
        </div>
         <div class='member_box'>
           <div class='member_item'  v-if='type== 1' >{{$t('m.msg.MSG84')}}：
             <img :src='item.fromMember.httpAvatar' width='20px' height='20px'/>
             {{item.fromMember.name}}</div>
             <div class='member_item'  v-if='type== 2' >{{$t('m.msg.MSG85')}}：
             <img :src='item.toMember.httpAvatar' width='20px' height='20px'/>
             {{item.toMember.name}}</div>
           <div class='member_item'>{{$t('m.msg.MSG86')}}：{{item.goldNum}}</div>
           <div class='member_item'>{{$t('m.msg.MSG87')}}：{{item.time}}</div>
         </div>
      </div>
     
    </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>

     <!-- 详情弹框 -->
      <van-popup closeable v-model="dialogFlag" class="popup">
        <div>{{$t('m.msg.MSG80')}}</div>
        <img :src="gift.path" class="popup_img" />
        <div class="emojilist_name">{{gift.name}}</div>
        <div>{{gift.info}}</div>
        <div class="emojilist_price">{{$t('m.msg.DIAMOND')}}：{{formatMoney(gift.price)}}</div>
        <div class="popup_footer">
          <div @click="dialogFlag = false"  class="popup_btn">{{$t('m.msg.MSG81')}}</div>
           <!-- <div type="primary" @click="sendGift" class="popup_btn">{{$t('m.msg.SENDGIFT_BTN')}}</div> -->
        </div>
      </van-popup>
  </div>
</template>

<script>
	import {
    List,
    PullRefresh,
    Popup
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery, getQuery, formatMoney} from '@/api/query';
export default {
  name: 'gift',
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Popup.name]: Popup,
    HeaderNav
  },
  data(){
    return {
      type: 0,
      title: '',
      page: 1,
      list:[],
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false,
      pageSize: 8,
      dialogFlag: false,
      gift: {},
      url:''//接口路径
    }
  },
  methods: {
    showDetail(gift){
      this.gift = gift;
      this.dialogFlag = true;
    },
    formatMoney(money){
      return formatMoney(money);
    },
    //加载数据
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //初始化
      this.pages = 0;
      this.list = [];
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.loadData();
    },
    loadData(){
      var that = this;
      if(that.pages > 0 && that.page > that.pages){
        that.finished = true;
      }
      let params = {
        page: that.page,
        pageSize: that.pageSize
      }
      getQuery( that.url, params)
        .then (res => {
          if(res.code == 200){
            //如果数据不够finished
            if(res.data.records.length < that.pageSize){
              that.finished = true;
            }
            that.list = that.list.concat(res.data.records)
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
        }).catch(function (error) {
          that.error = true;     
        });
    }
  },
   mounted: function() {
  	var that = this;
  	console.log(this.$route.query.type)
  	that.type = that.$route.query.type;
  	if(that.type == 1){
      that.title = that.$i18n.t('m.headernav.GIFT1') 
      that.url = '/member/gift/to/list'
    console.log(that.url)
    }else if(that.type == 2){
      that.title = that.$i18n.t('m.headernav.GIFT2') 
      that.url = '/member/gift/from/list'
  	}
    that.loadData();
  },
  created(){
    
  }
}
</script>
<style scoped>
	
	.nav_container{
    position: fixed;
    width: 100%;
    background: #fff;
    box-shadow: 2px 2px 12px #ccc;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    height: 8vh;
    font-size: 32px;
    font-weight: 550;
    display: flex;
    align-items: center;
	}
	
	.nav_img_container{
		width: 50px;
		display: flex;
		justify-content: flex-end;
	}
	
	.nav_img{
		height: 40px;
		width: 40px;
		/*margin-left: 10px;*/
	}
	
	.nav_title{
		margin-left: 40vw;
	}
	
	.nav_btn{
		height: 60px;
		width: 120px;
		border-radius: 10px;
		color: white;
		background-color: #1dc116;
		font-size: 16px;
		text-align: center;
		line-height: 60px;
		margin-left: 22vw;
	}
	
	.sendgift_container{
		display: flex;
		flex-wrap: wrap;
		
	}

  .sendgift_box{
    height: 25vh;
    width: 28vw;
    margin: 10% 5vw 0 5vw;
  }

  .sendgift_img{
    height: 30%;
    /*width: 80%;*/
  }

  .sendgift_txt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 文本不换行，这样超出一行的部分被截取，显示... */
  }

   .sendgift_info{
    font-size: 26px;
    color: #a1a1a1;
    display: -webkit-box;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .popup_footer{
    /* display: flex; */
    margin-top: 10%;
    /* justify-content:space-between; */
    /* width: 60%; */

  }

  .popup_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: #ff7300;
    color: white;
    font-size: 20px;
    height: 60px;
    width: 40%;
    margin-left: 30%;
  }

  .popup{
    width: 70vw;
    /* height: 30vh; */
    text-align: center;
    font-size: 32px;
     color: #a1a1a1; 
    padding: 20px 20px;
  }

  .popup_img{
    width: 20%;
    height: 20%;
    margin-top: 20px;
  }

  .member_box{
    line-height: 46px;
    color: #a1a1a1;
    margin-top: 23%;
    font-size: 18px;
  }

  /* .member_item{
    margin-top: 20%;
  } */

  .list_box{
     display:flex;
     /* justify-content:space-between; */
     width: 90vw;
     margin-left: 5vw;
     height: 23vh;
     /* padding: 30px 5vw 0px 5vw; */
     border-bottom: 2px #a1a1a1 solid;
  }
</style>
